<template>
    <div class="wrap">
        <header>
            <p>宏烨经纪人</p>
        </header>
        <main>
            <!-- 登录 -->
            <h1>
                {{ VierOrPwd ? "登录" : "注册" }}
            </h1>

            <!-- 表单信息收集 -->
            <form v-if="VierOrPwd">
                <!-- 账号 -->
                <div class="form_div">
                    <input type="text" placeholder="请输入账号" v-model="user">
                    <span class="formMess" v-show="phoneFlag">账号错误</span>
                </div>

                <!-- 密码 -->
                <div class="form_div">
                    <input class="MInp" type="text" placeholder="请输入密码" v-model="pwd">
                    <span class="formMess" v-show="verifyFlag">密码错误</span>
                </div>

                <!-- 登录 -->
                <div class="form_sub">
                    <b @click="loginFun()">
                        登录
                    </b>
                    <span @click="changeFlag('VierOrPwd')">
                        {{ VierOrPwd ? "登录" : "注册" }}
                    </span>
                </div>
            </form>

            <form v-if="!VierOrPwd">
                <!-- 账号 -->
                <div class="form_div">
                    <input type="text" placeholder="请输入账号" v-model="user">
                    <span class="formMess" v-show="phoneFlag">账号或密码错误</span>
                </div>

                <!-- 密码 -->
                <div class="form_div">
                    <input class="MInp" type="text" placeholder="请输入密码" v-model="pwd">
                    <span class="formMess" v-show="verifyFlag">账号或密码错误</span>
                </div>

                <!-- 登录 -->
                <div class="form_sub">
                    <b @click="registFun()">
                        注册
                    </b>
                    <span @click="changeFlag('VierOrPwd')">
                        {{ VierOrPwd ? "登录" : "注册" }}
                    </span>
                </div>
                
            </form>
        </main>
    </div>
</template>

<script>

import { loginUrl , VierifySub , registUrl} from './../../services';

export default {
    data() {
        return {

            // 输入的form表单值
            phoneValue : '',
            vierifyValue : '',

            // 状态开关
            phoneFlag : false,
            verifyFlag : false,

            // 登录注册判断
            VierOrPwd : true,

            // 账号密码
            user : '',
            pwd : ''
        }
    },
    created(){
        wx.removeStorageSync( 'token' );
        console.log(this.$mp);
    },
    methods: {

        uuidFun(){
            var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('')
            var uuid = new Array(36),
                rnd = 0,
                r
            for (var i = 0; i < 36; i++) {
                if (i === 8 || i === 13 || i == 18 || i == 23) {
                    uuid[i] = '-'
                } else if (i === 14) {
                    uuid[i] = '4'
                } else {
                    if (rnd <= 0x02)
                        rnd = 0x2000000 + (Math.random() * 0x1000000) | 0
                    r = rnd & 0xf
                    rnd = rnd >> 4
                    uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r]
                }
            }
            return uuid.join('').replace(/-/gm, '').toLowerCase()

        },

        // 验证码请求
        async vierifyFun(){
            console.log(this.uuidFun());
            console.log('vierifyFun...' , this.phoneValue);
            let result = await VierifySub(`mobile=${this.phoneValue}&type=2&flag=1&extra_code=8ba3c541412d11b0fb690d3da2a15641`)
            console.log( 'vierifyFun_result...' , result);

        },

        // 更改下标
        changeFlag( target , flag=null ){
            flag === null ?
            this[target] = !this[target]
            : this[target] = flag;

            this.user = '';
            this.pwd = '';

            this.phoneValue = '';
            this.vierifyValue = '';

        },

        // 登录请求
        async loginFun(){

            // 重置开关
            this.phoneFlag = false;
            this.verifyFlag = false;

            // 向后台发送给登录请求
            let result = await loginUrl({ username: this.user, password:  this.pwd })
            console.log( 'login...' , result.body.token);
                debugger    

            // 重置值
            this.phoneValue = '';
            this.vierifyValue = '';

            if(result.status == 200){
                // token存入本地
                wx.setStorageSync('token' , result.body.token);

                this.GoTo();
            }else{
                // 提示错误
                this.phoneFlag = true;
                this.verifyFlag = true;
            }

            
        },  

        // 注册请求
        async registFun(){
            console.log('registFun...' , this.phoneValue , this.vierifyValue );

            // 重置开关
            this.phoneFlag = false;
            this.verifyFlag = false;

            if(this.VierOrPwd)
            {
                if( /^1[3-8]d{9}$/.test(this.phoneValue))
                    {
                        this.phoneFlag = true;
                    }

                if( this.vierifyValue == '' || this.vierifyValue == null){
                    this.verifyFlag = true;
                }
            }else
            {
                // 向后台发送注册请求
                let result = await registUrl({ 
                    username: this.user, 
                    password:  this.pwd 
                })
            }

            

            // 重置值
            // this.phoneValue = '';
            // this.vierifyValue = '';
        },

        // 跳转
        GoTo(){
            console.log('跳转');
            uni.switchTab({
                 url: '/pages/index/index'
            });
        }
    },
}
</script>

<style lang="scss" scoped>
    page{
        width: 100%;
        height: 100%;
    }

    .wrap{
        width: 100%;
        height: 100%;
        // background: #f95;
    }

    header{
        width: 100%;
        height: 220rpx;
        box-sizing: border-box;
        // background: #fff;
        // background: linear-gradient(left , #00f , #66f);
        padding: 130rpx 0 0 60rpx;
        p{
            font-size: 18px;
            // color: #fff;
            color: #000;
        }
        border-bottom: 1rpx solid #999;
    }

    main{
        width: 100%;
        h1{
            height: 300rpx;
            font-size: 24px;
            text-align: center;
            line-height: 300rpx;
        }
    }

    form{
        width: 100%;
        display: flex;
        flex-direction: column;
        // justify-content: center;
        align-items: center;

        .form_div{
            width: 560rpx;
            // flex: 1;
            height: 120rpx;
            border-bottom: 1px solid #a7a7a7;

            position: relative;

            display: flex;
            justify-content: space-between;
            align-items: center;

            .formMess{
                position: absolute;
                bottom: -50rpx;
                font-size: 12px;
                color: red;
                transition: all 1s;
            }

            input{
                flex: 1;
            }

            .MInp{
                width: 100%;  
            }

            margin-bottom: 40rpx;
        }

        .form_sub{
            margin-top: 50rpx;
            width: 100%;
            display: flex;
            justify-content: space-between;
            font-size: 18px;
            span{
                font-size: 12px;
                color: #999;
            }
        }
    }
</style>